<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('数据统计')" />
</head>
<body class="gray-bg">
<form class="form-horizontal m" id="form-projectInfo-edit" th:object="${projectInfo}">
  <input id="projectName" type="hidden" th:field="*{projectName}" />
</form>
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="cod-line-chart"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="nh3n-line-chart"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="totaln-line-chart"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="totalp-line-chart"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="ph-line-chart"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="sv30-line-chart"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="do-line-chart"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="tp-line-chart"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="intake-line-chart"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="micro-bar-chart"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-offset-5 col-sm-10">
      <button type="button" class="btn btn-sm btn-primary" onclick="exportData()"><i class="fa fa-download"></i>导 出</button>&nbsp;
      <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
    </div>
  </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
  var prefix = ctx + "project/projectData";
  var codImage = '';
  var nh3nImage = '';
  var totalnImage = '';
  var totalpImage = '';
  var phImage = '';
  var sv30Image = '';
  var doImage = '';
  var tImage = '';
  var waterImage = '';
  var microImage = '';

  $(function () {
    const dateSize = [[${#lists.size(waterChart.dateList)}]];
    if(+dateSize !== 0) {
      const dates = [[${waterChart.dateList}]];
      const inCod = [[${waterChart.inCodList}]];
      const outCod = [[${waterChart.outCodList}]];
      for (var i = 0;i < dates.length; i++) {
        if (inCod[i] == null || inCod[i] == '')
          inCod[i] = '';

        if (outCod[i] == null || outCod[i] == '')
          outCod[i] = '';
      }
      const standardCod = [[${standardCod}]]; // 水质指标Cod基准值
      let standardCodList = [];
      if (standardCod != null && standardCod != '' && standardCod != -1) {
        for (var i = 0;i < dates.length; i++) {
          standardCodList[i] = standardCod;
        }
      }
      let codLineChart = echarts.init(document.getElementById("cod-line-chart"));
      codLineChart.setOption({
        animation: false,
        title : {
          text: 'COD水质指标情况'
        },
        tooltip : {
          trigger: 'axis'
        },
        legend: {
          data:['进水COD','出水COD']
        },
        grid:{
          x:50,
          x2:30,
          y2:24
        },
        calculable : true,
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : dates
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series: [{
          name:'进水COD',
          type:'line',
          data:inCod,
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          }
        },
          {
            name:'出水COD',
            type:'line',
            data:outCod,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            }
          },
          {
            name:'Cod基准值',
            type:'line',
            smooth:false,   //关键点，为true是不支持虚线的，实线就用true
            itemStyle:{
              normal:{
                lineStyle:{
                  type:'dashed'  //'dotted'虚线 'solid'实线
                }
              }
            },
            data:standardCodList
          }]
      });
      $(window).resize(codLineChart.resize);
      codImage = codLineChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
      });

      const inNh3N = [[${waterChart.inNh3NList}]];
      const outNh3N = [[${waterChart.outNh3NList}]];
      for (var i = 0; i < dates.length; i++) {
        if (inNh3N[i] == null || inNh3N[i] == '')
          inNh3N[i] = '';

        if (outNh3N[i] == null || outNh3N[i] == '')
          outNh3N[i] = '';
      }
      const standardNh3N = [[${standardNh3N}]]; // 水质指标氨氮基准值
      let standardNh3NList = [];
      if (standardNh3N != null && standardNh3N != '' && standardNh3N != -1) {
        for (var i = 0; i < dates.length; i++)
          standardNh3NList[i] = standardNh3N;
      }
      let nh3nLineChart = echarts.init(document.getElementById("nh3n-line-chart"));
      nh3nLineChart.setOption({
        animation: false,
        title : {
          text: '氨氮水质指标情况'
        },
        tooltip : {
          trigger: 'axis'
        },
        legend: {
          data:['进水氨氮','出水氨氮']
        },
        grid:{
          x:50,
          x2:30,
          y2:24
        },
        calculable : true,
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : dates
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series: [{
          name:'进水氨氮',
          type:'line',
          data:inNh3N,
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          }
        },
          {
            name:'出水氨氮',
            type:'line',
            data:outNh3N,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            }
          },
          {
            name:'氨氮基准值',
            type:'line',
            smooth:false,   //关键点，为true是不支持虚线的，实线就用true
            itemStyle:{
              normal:{
                lineStyle:{
                  type:'dashed'  //'dotted'虚线 'solid'实线
                }
              }
            },
            data:standardNh3NList
          }]
      });
      $(window).resize(nh3nLineChart.resize);
      nh3nImage = nh3nLineChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
      });

      const inTotalN = [[${waterChart.inTotalNList}]];
      const outTotalN = [[${waterChart.outTotalNList}]];
      for (var i = 0; i < dates.length; i++) {
        if (inTotalN[i] == null || inTotalN[i] == '')
          inTotalN[i] = '';

        if (outTotalN[i] == null || outTotalN[i] == '')
          outTotalN[i] = '';
      }
      const standardTotalN = [[${standardTotalN}]]; // 水质指标总氮基准值
      let standardTotalNList = [];
      if (standardTotalN != null && standardTotalN != '' && standardTotalN != -1) {
        for (var i = 0; i < dates.length; i++)
          standardTotalNList[i] = standardTotalN;
      }
      let totalnLineChart = echarts.init(document.getElementById("totaln-line-chart"));
      totalnLineChart.setOption({
        animation: false,
        title : {
          text: '总氮水质指标情况'
        },
        tooltip : {
          trigger: 'axis'
        },
        legend: {
          data:['进水总氮','出水总氮']
        },
        grid:{
          x:50,
          x2:30,
          y2:24
        },
        calculable : true,
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : dates
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series: [{
          name:'进水总氮',
          type:'line',
          data:inTotalN,
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          }
        },
          {
            name:'出水总氮',
            type:'line',
            data:outTotalN,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            }
          },
          {
            name:'总氮基准值',
            type:'line',
            smooth:false,   //关键点，为true是不支持虚线的，实线就用true
            itemStyle:{
              normal:{
                lineStyle:{
                  type:'dashed'  //'dotted'虚线 'solid'实线
                }
              }
            },
            data:standardTotalNList
          }]
      });
      $(window).resize(totalnLineChart.resize);
      totalnImage = totalnLineChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
      });

      const inTotalP = [[${waterChart.inTotalPList}]];
      const outTotalP = [[${waterChart.outTotalPList}]];
      for (var i = 0; i < dates.length; i++) {
        if (inTotalP[i] == null || inTotalP[i] == '')
          inTotalP[i] = '';

        if (outTotalP[i] == null || outTotalP[i] == '')
          outTotalP[i] = '';
      }
      const standardTotalP = [[${standardTotalP}]]; // 水质指标总磷基准值
      let standardTotalPList = [];
      if (standardTotalP != null && standardTotalP != '' && standardTotalP != -1) {
        for (var i = 0; i < dates.length; i++)
          standardTotalPList[i] = standardTotalP;
      }
      let totalpLineChart = echarts.init(document.getElementById("totalp-line-chart"));
      totalpLineChart.setOption({
        animation: false,
        title : {
          text: '总磷水质指标情况'
        },
        tooltip : {
          trigger: 'axis'
        },
        legend: {
          data:['进水总磷','出水总磷']
        },
        grid:{
          x:50,
          x2:30,
          y2:24
        },
        calculable : true,
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : dates
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series: [{
          name:'进水总磷',
          type:'line',
          data:inTotalP,
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          }
        },
          {
            name:'出水总磷',
            type:'line',
            data:outTotalP,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            }
          },
          {
            name:'总磷基准值',
            type:'line',
            smooth:false,   //关键点，为true是不支持虚线的，实线就用true
            itemStyle:{
              normal:{
                lineStyle:{
                  type:'dashed'  //'dotted'虚线 'solid'实线
                }
              }
            },
            data:standardTotalPList
          }]
      });
      $(window).resize(totalpLineChart.resize);
      totalpImage = totalpLineChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
      });

      const inPh = [[${waterChart.inPhList}]];
      const outPh = [[${waterChart.outPhList}]];
      for (var i = 0; i < dates.length; i++) {
        if (inPh[i] == null || inPh[i] == '')
          inPh[i] = '';

        if (outPh[i] == null || outPh[i] == '')
          outPh[i] = '';
      }
      const standardPh = [[${standardPh}]]; // 水质指标PH基准值
      let standardPhList = [];
      if (standardPh != null && standardPh != '' && standardPh != -1) {
        for (var i = 0; i < dates.length; i++)
          standardPhList[i] = standardPh;
      }
      let phLineChart = echarts.init(document.getElementById("ph-line-chart"));
      phLineChart.setOption({
        animation: false,
        title : {
          text: 'PH水质指标情况'
        },
        tooltip : {
          trigger: 'axis'
        },
        legend: {
          data:['进水PH','出水PH']
        },
        grid:{
          x:50,
          x2:30,
          y2:24
        },
        calculable : true,
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : dates
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series: [{
          name:'进水PH',
          type:'line',
          data:inPh,
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          }
        },
          {
            name:'出水PH',
            type:'line',
            data:outPh,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            }
          },
          {
            name:'PH基准值',
            type:'line',
            smooth:false,   //关键点，为true是不支持虚线的，实线就用true
            itemStyle:{
              normal:{
                lineStyle:{
                  type:'dashed'  //'dotted'虚线 'solid'实线
                }
              }
            },
            data:standardPhList
          }]
      });
      $(window).resize(phLineChart.resize);
      phImage = phLineChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
      });

      const inSv30 = [[${waterChart.inSv30List}]];
      const outSv30 = [[${waterChart.outSv30List}]];
      for (var i = 0; i < dates.length; i++) {
        if (inSv30[i] == null || inSv30[i] == '')
          inSv30[i] = '';

        if (outSv30[i] == null || outSv30[i] == '')
          outSv30[i] = '';
      }
      let sv30LineChart = echarts.init(document.getElementById("sv30-line-chart"));
      sv30LineChart.setOption({
        animation: false,
        title : {
          text: 'SV30水质指标情况'
        },
        tooltip : {
          trigger: 'axis'
        },
        legend: {
          data:['进水SV30','出水SV30']
        },
        grid:{
          x:50,
          x2:30,
          y2:24
        },
        calculable : true,
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : dates
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series: [{
          name:'进水SV30',
          type:'line',
          data:inSv30,
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          }
        },
          {
            name:'出水SV30',
            type:'line',
            data:outSv30,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            }
          }]
      });
      $(window).resize(sv30LineChart.resize);
      sv30Image = sv30LineChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
      });

      const inDo = [[${waterChart.inDoList}]];
      const outDo = [[${waterChart.outDoList}]];
      for (var i = 0; i < dates.length; i++) {
        if (inDo[i] == null || inDo[i] == '')
          inDo[i] = '';

        if (outDo[i] == null || outDo[i] == '')
          outDo[i] = '';
      }
      const standardDo = [[${standardDo}]]; // 水质指标DO基准值
      let standardDoList = [];
      if (standardDo != null && standardDo != '' && standardDo != -1) {
        for (var i = 0; i < dates.length; i++)
          standardDoList[i] = standardDo;
      }
      let doLineChart = echarts.init(document.getElementById("do-line-chart"));
      doLineChart.setOption({
        animation: false,
        title : {
          text: 'DO水质指标情况'
        },
        tooltip : {
          trigger: 'axis'
        },
        legend: {
          data:['进水DO','出水DO']
        },
        grid:{
          x:50,
          x2:30,
          y2:24
        },
        calculable : true,
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : dates
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series: [{
          name:'进水DO',
          type:'line',
          data:inDo,
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          }
        },
          {
            name:'出水DO',
            type:'line',
            data:outDo,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            }
          },
          {
            name:'DO基准值',
            type:'line',
            smooth:false,   //关键点，为true是不支持虚线的，实线就用true
            itemStyle:{
              normal:{
                lineStyle:{
                  type:'dashed'  //'dotted'虚线 'solid'实线
                }
              }
            },
            data:standardDoList
          }]
      });
      $(window).resize(doLineChart.resize);
      doImage = doLineChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
      });

      const inTp = [[${waterChart.inTpList}]];
      const outTp = [[${waterChart.outTpList}]];
      for (var i = 0; i < dates.length; i++) {
        if (inTp[i] == null || inTp[i] == '')
          inTp[i] = '';

        if (outTp[i] == null || outTp[i] == '')
          outTp[i] = '';
      }
      const standardT = [[${standardT}]]; // 水质指标DO基准值
      let standardTList = [];
      if (standardT != null && standardT != '' && standardT != -1) {
        for (var i = 0; i < dates.length; i++)
          standardTList[i] = standardT;
      }
      let tpLineChart = echarts.init(document.getElementById("tp-line-chart"));
      tpLineChart.setOption({
        animation: false,
        title : {
          text: '温度水质指标情况'
        },
        tooltip : {
          trigger: 'axis'
        },
        legend: {
          data:['进水温度','出水温度']
        },
        grid:{
          x:50,
          x2:30,
          y2:24
        },
        calculable : true,
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : dates
          }
        ],
        yAxis : [
          {
            type : 'value',
            axisLabel : {
              formatter: '{value} °C'
            }
          }
        ],
        series: [{
          name:'进水温度',
          type:'line',
          data:inTp,
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          }
        },
          {
            name:'出水温度',
            type:'line',
            data:outTp,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            }
          },
          {
            name:'温度基准值',
            type:'line',
            smooth:false,   //关键点，为true是不支持虚线的，实线就用true
            itemStyle:{
              normal:{
                lineStyle:{
                  type:'dashed'  //'dotted'虚线 'solid'实线
                }
              }
            },
            data:standardTList
          }]
      });
      $(window).resize(tpLineChart.resize);
      tImage = tpLineChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
      });

      const inIntake = [[${waterChart.inIntakeList}]];
      const outIntake = [[${waterChart.outIntakeList}]];
      for (var i = 0; i < dates.length; i++) {
        if (inIntake[i] == null || inIntake[i] == '')
          inIntake[i] = '';

        if (outIntake[i] == null || outIntake[i] == '')
          outIntake[i] = '';
      }
      let intakeLineChart = echarts.init(document.getElementById("intake-line-chart"));
      intakeLineChart.setOption({
        animation: false,
        title : {
          text: '进出水量指标情况'
        },
        tooltip : {
          trigger: 'axis'
        },
        legend: {
          data:['进水量','出水量']
        },
        grid:{
          x:50,
          x2:30,
          y2:24
        },
        calculable : true,
        xAxis : [
          {
            type : 'category',
            data : dates
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series: [{
          name:'进水量',
          type:'line',
          data:inIntake,
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          }
        },
          {
            name:'出水量',
            type:'line',
            data:outIntake,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            }
          }]
      });
      $(window).resize(intakeLineChart.resize);
      waterImage = intakeLineChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
      });
    }
  });
</script>
<script th:inline="javascript">
  const microSize = [[${#lists.size(microBar.microNameList)}]];
  if (+microSize !== 0) {
    const legendNames = [[${microBar.microNameList}]];
    const seriesDatas = [[${microBar.microDosageList}]];
    let microBarChart = echarts.init(document.getElementById("micro-bar-chart"));
    microBarChart.setOption({
      animation: false,
      title : {
        text: '产品用量情况'
      },
      tooltip : {
        trigger: 'axis'
      },
      grid:{
        x:50,
        x2:30,
        y2:24
      },
      calculable : true,
      xAxis : [
        {
          type : 'category',
          data : legendNames
        }
      ],
      yAxis : [
        {
          type : 'value'
        }
      ],
      series: [{
        name:'产品用量',
        type:'bar',
        barWidth: 30,
        data:seriesDatas
      }]
    });
    $(window).resize(microBarChart.resize);
    microImage = microBarChart.getDataURL({
      pixelRatio: 2,
      backgroundColor: '#fff'
    });
  }

  function exportData() {
    var form = $('<form method="POST" action="' + prefix + '/export">');
    form.append($('<input type="hidden" name="projectName" value="' + $('#projectName').val() + '">'));
    form.append($('<input type="hidden" name="codImage" value="'+ codImage +'">'));
    form.append($('<input type="hidden" name="nh3nImage" value="'+ nh3nImage +'">'));
    form.append($('<input type="hidden" name="totalNImage" value="'+ totalnImage +'">'));
    form.append($('<input type="hidden" name="totalPImage" value="'+ totalpImage +'">'));
    form.append($('<input type="hidden" name="phImage" value="'+ phImage +'">'));
    form.append($('<input type="hidden" name="sv30Image" value="'+ sv30Image +'">'));
    form.append($('<input type="hidden" name="doImage" value="'+ doImage +'">'));
    form.append($('<input type="hidden" name="tImage" value="'+ tImage +'">'));
    form.append($('<input type="hidden" name="waterImage" value="'+ waterImage +'">'));
    form.append($('<input type="hidden" name="microImage" value="'+ microImage +'">'));
    $('body').append(form);
    form.submit();
  }
</script>
</body>
</html>